<!DOCTYPE html>
<script src="./static/lib/vue.js"></script>

<div id="main">
	<div :name="value">{{ text }}</div>
	<div>{{ text2 }}</div>
	<div v-html="text2"></div>
	<div :name="nameAttr"></div>
  
  <div v-for="item in test.user_list">{{ item.name }}</div>
  <div @click="updateName()">修改用户名</div>
</div>

<script>
var vm = new Vue({
	el: '#main',
	data: {
		text: '我是一个text',
		text2: '<div style="color: red;"><p>我是一个段落</p></div>',
		value: 123,
		nameAttr: 'liu',
    test: {
      user_list: [
        {
          name: 'maoxian'
        }
      ],
    },    
    user: {
      name: 'maoxian'
    }
	},
  methods: {
    updateName() {
      setTimeout(() => {
        this.test.user_list[0].name = 123423432
      }, 100)
      
    }
  },
})
</script>

<script src="">
// 模板语法
// 文本插值 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
// 原始 HTML 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
</script>